import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { ButtonItem } from '@/utils/interfaces';

@Component({})
export default class AppButton extends Vue {
  @Prop({
    required: false,
    default: () => [],
  }) items!: ButtonItem[];
  @Prop({
    required: false,
    default: () => {},
  })
  parentEl!: any;

  beforeDestroy() {
    this.items.forEach((i: any) => {
      if (i?.handler?.$el) {
        i.handler.$el.removeEventListener('click', i.handler);
      }
    })
  }

  isShow(item: any) {
    if (!item) return false;
    if (!Object.prototype.hasOwnProperty.call(item, 'show')) return true;
    if (typeof (item.show) === 'string') return this.parentEl[item.show];
    return item.show;
  }

  getButtonClass(style: string | string[]) {
    if (!style) return;
    if (typeof style === 'string') {
      const styles = style.split(" ");
      return styles.map(item => 'button-' + item).join(" ");
    } else if (Array.isArray(style)) {
      return style.map(item => 'button-' + item).join(" ");
    }
  }
}
